import Image from "next/image"
import Link from "next/link"
import type { MV } from "@/types/mv"

interface MVGridProps {
  mvs: MV[]
}

export function MVGrid({ mvs = []}: MVGridProps) {
  return (
    <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-4">
      {mvs.map((mv) => (
        <Link key={mv.id} href={`/mv/${mv.id}`} className="group">
          <div className="space-y-3">
            <div className="relative aspect-video overflow-hidden rounded-md group">
              <Image
                src={mv.cover || "/placeholder.svg"}
                alt={mv.title}
                layout="fill"
                objectFit="cover"
                className="transition-transform group-hover:scale-105"
              />
              <div className="absolute inset-0 bg-black bg-opacity-50 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center">
                <svg className="w-12 h-12 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    strokeWidth={2}
                    d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z"
                  />
                  <path
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    strokeWidth={2}
                    d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
                  />
                </svg>
              </div>
            </div>
            <div>
              <h3 className="font-medium truncate">{mv.title}</h3>
              <p className="text-sm text-muted-foreground truncate">{mv.artists}</p>
              <p className="text-xs text-muted-foreground">{mv.playCount.toLocaleString()} 次观看</p>
            </div>
          </div>
        </Link>
      ))}
    </div>
  )
}

